<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      #div1{width: 100px;
        height: 100px;
        /*  上下8px 左右自动调整居中*/
        margin: 8px auto;
        border:solid 1px red;
      .pic{height: 100px;width: 100px;border-radius: 50%}
      #div2{width: 0;
            height: 0;
            border:solid 50px #d0c8d1;
            border-right-color: transparent;
            border-radius: 50px;
            margin: 0 auto;
      }
      #div3{width: 0;
            height: 0;
            border:solid 50px #d0c8d1;
            border-right-color: blue;
            border-left-color: yellow;
            border-top-color: red;
            border-bottom-color: green;
            border-radius: 50px;
            margin: 0 auto;
      }
    </style>
</head>
<body>
  <div id="div1">
      <img src="1.png" alt="没有该图片" class="pic">
  </div>
  <div id="div2"></div>
  <div id="div3"></div>

</body>
</html>